import { Button, Grid } from "@mui/material"

const labeledArray = [
  [
    { label: 'X [m]', value: 'x' },
    { label: 'Y [m]', value: 'y' },
    { label: 'Z [m]', value: 'z' },
    { label: 't [s]', value: 't' },
  ],
  [
    { label: '7', value: '7' },
    { label: '8', value: '8' },
    { label: '9', value: '9' },
    { label: '+', value: '+' },
    { label: '(', value: '(' },
    { label: 'sin', value: 'sin()' },
  ],
  [
    { label: '4', value: '4' },
    { label: '5', value: '5' },
    { label: '6', value: '6' },
    { label: '-', value: '-' },
    { label: ')', value: ')' },
    { label: 'cos', value: 'cos()' },
  ],
  [
    { label: '1', value: '1' },
    { label: '2', value: '2' },
    { label: '3', value: '3' },
    { label: '*', value: '*' },
    { label: '^', value: '^' },
    { label: 'tan', value: 'tan()' },
  ],
  [
    { label: '0', value: '0' },
    { label: '.', value: '.' },
    { label: 'e', value: 'e' },
    { label: '/', value: '/' },
    { label: 'exp', value: 'exp()' },
    { label: 'log', value: 'log()' },
  ],
]
export default function FormulaButtons({ onClick }: { onClick: (value: string) => void }) {
  return (<>
    <Grid container spacing={2}>
      {labeledArray.flatMap((row, i) =>
        row.map((col, j) =>
          <Grid item key={`${i}-${j}`} xs={i === 0 ? 3 : 2}>
            <Button variant="outlined" fullWidth onClick={() => onClick(col.value)}>
              {col.label}
            </Button>
          </Grid>
        )
      )}
    </Grid>
  </>)
}